﻿@model Guid
@section Styles{
    <style type="text/css">
        html,
        body {
            background: #ffffff;
        }
    </style>
}
@section Scripts{
    <input type="hidden" value='@Html.Raw(ViewData["power"])' id="hidden_power" />
    <input type="hidden" value='@(Model)' id="hidden_id" />
    <input type="hidden" value='@ViewData["pId"]' id="hidden_pId" />
    <script type="text/javascript">
        var power = JSON.parse(document.getElementById('hidden_power').value);
        var id = document.getElementById('hidden_id').value;
        var pId = document.getElementById('hidden_pId').value;
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    power: power,
                    prefix: "/Admin/SysMenu",
                    pId: pId,
                    vm: {
                        id: "",
                        form: {},
                        functionAllList: [],
                        functionIds: []
                    },
                    loading: false,
                }
            },
            computed: {
                formKey: function () {
                    return id ? id : '';
                }
            },
            created: function () {
                this.findForm();
            },
            mounted: function () {

            },
            methods: {
                closeWindow: function () {
                    tools.getLayer().close(tools.getLayer().getFrameIndex(window.name));
                },
                findForm() {
                    http.get(`${this.prefix}/findForm/${this.formKey}`, {}).then((res) => {
                        if (res.code != 1) return;
                        this.vm = res.data;
                        //给pid赋值
                        this.vm.form.parentId = this.pId ? this.pId : null;
                    });
                },
                saveForm() {
                    //验证
                    if (!this.vm.form.name) return tools.message('用户名不能为空!', '警告');

                    this.loading = true;
                    http.post(`${this.prefix}/saveForm`, this.vm).then((res) => {
                        this.loading = false;
                        if (res.code != 1) return;
                        tools.message("操作成功!", "成功");
                        this.closeWindow();
                    });
                }
            }
        });
    </script>
}

<div id="app" v-cloak class="pl-20 pr-20 pb-100">
    <div class="pt-20">
        <el-alert title="提示：" type="success">
            <div>
                <span>方便开发时 需要的 菜单ID&nbsp; : &nbsp;</span>{{vm.form.id}}
            </div>
            <div>
                <a target="_blank" href="https://element.eleme.cn/#/zh-CN/component/icon">图标查找地址： https://element.eleme.cn/#/zh-CN/component/icon</a>
            </div>
            <div>
                <a target="_blank" href="https://fontawesome.com">图标查找地址：https://fontawesome.com</a>
            </div>
            <div>
                <a target="_blank" href="http://www.fontawesome.com.cn/">图标查找地址：http://www.fontawesome.com.cn 注意：第一个 fa 要改为 fas 有的图标可能不支持</a>
            </div>           
        </el-alert>        
    </div>
    <el-row :gutter="15">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>编号:</h4>
            <el-input v-model="vm.form.number" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>菜单名称:</h4>
            <el-input v-model="vm.form.name" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>菜单地址:</h4>
            <el-input v-model="vm.form.url" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>图标:</h4>
            <el-input v-model="vm.form.icon" placeholder="请输入" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>是否显示:</h4>
            <el-radio v-model="vm.form.isShow" :label="1">是</el-radio>
            <el-radio v-model="vm.form.isShow" :label="2">否</el-radio>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <h4>选项卡能否关闭:</h4>
            <el-radio v-model="vm.form.isClose" :label="1">是</el-radio>
            <el-radio v-model="vm.form.isClose" :label="2">否</el-radio>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <h4>拥有功能:</h4>
            <el-checkbox-group v-model="vm.functionIds">
                <el-checkbox v-for="(item,index) in vm.functionAllList" :key="index" :label="item.id">
                    {{item.name}}
                </el-checkbox>
            </el-checkbox-group>
        </el-col>
    </el-row>
    <div class="hzy-admin-window-footer">
        <div style="flex: 1 1 0%"></div>
        <div class="p-10">
            <el-button type="primary" @@click="saveForm" :loading="loading">提交</el-button>
            <el-button type="danger" @@click="closeWindow">关闭</el-button>
        </div>
    </div>
</div>